<script setup>
import Header from './header.vue'
import Left from './left.vue'
import nav from './data.js'

const route = useRoute()
const router = useRouter()

const data = reactive({
    nav: nav, //所有导航数据
    topNav: nav.map((obj) => obj.title), //顶部导航数据
    leftNav: nav[0].children, //左侧导航数据
})
const status = reactive({
    leftMin: false, //左侧导航变小
    topCurrent: '-1', //顶部选中索引值
    leftCurrent: '-1_-1', //左侧选中索引值
})

onMounted(() => {
    navDisplay()
    navChange()
    windowChange()
    //窗口宽度改变时
    window.onresize = () => { windowChange() }
    // 当路由变动时更改导航选中
    router.beforeEach((to, from, next) => {
        if (to.path != from.path) navChange(to)
        next()
    })
})

//获取后台链接的权限字段
const navDisplay = () => {
    //修改导航显示(3级)
    for (let i = data.nav.length - 1; i >= 0; i--) {
        const item = data.nav[i]
        if (!sys.power(item.power)) data.nav[i].hidden = true
        else data.nav[i].hidden = false
        if (!item.children) continue
        for (let j = item.children.length - 1; j >= 0; j--) {
            const item2 = item.children[j]
            if (!sys.power(item2.power)) data.nav[i].children[j].hidden = true
            else data.nav[i].children[j].hidden = false
            if (!item2.children) continue
            for (let k = item2.children.length - 1; k >= 0; k--) {
                const item3 = item2.children[k]
                if (!sys.power(item3.power)) data.nav[i].children[j].children[k].hidden = true
                else data.nav[i].children[j].children[k].hidden = false
            }
            //如果下子集都没有则删除当前主级
            if (data.nav[i].children[j].children.filter((obj) => !obj.hidden).length == 0) {
                data.nav[i].children[j].hidden = true
            } else data.nav[i].children[j].hidden = false
        }
        //如果子集都没有则删除当前主级
        if (data.nav[i].children.filter((obj) => !obj.hidden).length == 0) {
            data.nav[i].hidden = true
        } else data.nav[i].hidden = false
    }
    //顶部导航数据
    data.topNav = data.nav.filter((obj) => !obj.hidden).map((obj) => obj.title)
}
//导航选中变更
const navChange = (to) => {
    let query = route.query
    let path = route.path
    if (to) {
        query = to.query
        path = to.path
    }
    //根据route判断导航的选中状态与左侧导航数据
    const navList = func.treeToList(data.nav)
    let key = navList.findIndex((item) => item.path == path || (item.pathChild && item.pathChild.indexOf(path) != -1))
    //如果没有找到name就找它的上一个页面是否在nav里面
    if (key == -1 && query.back) {
        key = navList.findIndex((item) => item.path == query.back.split('?')[0])
        if (key == -1) {
            const backUrl = fullDecode(query.back)
            const backs = (backUrl.match(/[?&]back=([\w\/]+)/g) || []).map((item) => item.replace(/[?&]back=/, ''))
            for (const i in backs) {
                const item = backs[i]
                key = navList.findIndex((item2) => item2.path == item)
            }
        }
    }
    if (key != -1) {
        const keys = navList[key].treePath
        status.topCurrent = keys[0]
        status.leftCurrent = keys.join('_')
        data.leftNav = data.nav[keys[0]].children
    }
}
//窗口<=1200px时收缩左边导航
const windowChange = () => {
    const width = document.body.clientWidth
    if (width <= 1200) {
        status.leftMin = true
    } else {
        status.leftMin = false
    }
}
//顶部导航点击时
const topChange = (key) => {
    status.topCurrent = key
    if (data.nav[key].children) {
        data.leftNav = data.nav[key].children
    } else {
        data.leftNav = []
    }
}
//循环提取
function fullDecode(str) {
    let up = str
    while (true) {
        str = decodeURIComponent(str)
        if (str === up) return str
        up = str
    }
}
</script>
<template>
    <div>
        <el-container class="frame">
            <el-header class="header">
                <Header :nav="data.topNav" :current="status.topCurrent" @navChange="topChange" />
            </el-header>
            <el-container>
                <el-aside class="left">
                    <Left :nav="data.leftNav" :min="status.leftMin" :current="status.leftCurrent"
                        :topCurrent="status.topCurrent" />
                </el-aside>
                <el-main class="main">
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<style scoped lang="scss">
.frame {
    min-width: 780px;
    background-color: #f5f5f5;
    // background-color: var(--el-bg-color-page);
}

.header {
    background-color: #fff;
    padding: 0px 0px;
    height: 60px;
    border-bottom: 1px solid var(--el-menu-border-color);
    box-shadow: 0 0 5px 0 var(--el-menu-border-color);
    position: relative;
    z-index: 3;
}

.left {
    background-color: #fff;
    width: 200px;
    height: calc(100vh - 60px);
    border-right: 1px solid var(--el-menu-border-color);
    box-shadow: 0 0 5px 0 var(--el-menu-border-color);
    position: relative;
    z-index: 2;
    transition: all 0.5s ease;
    overflow-x: hidden;
}

.main {
    height: calc(100vh - 60px);
    position: relative;
    z-index: 1;
}

//当整体宽度小于等于1200px时
@media (max-width: 1200px) {
    .left {
        width: 65px;
        overflow: hidden;
    }
}

//当整体宽度小于780px时出现横向滚动条,100vh需要重新计算
@media (max-width: 779px) {
    .left {
        height: calc(100vh - 60px - 20px);
    }

    .main {
        height: calc(100vh - 60px - 20px);
        padding-bottom: 0px;
    }
}
</style>
